<template>
  <div id="questionnaire-results">
    <div class="main-container container-fluid container-limited page-holder">
      <div class="common-breadcrumb"></div>
      <div class="results-container">
        <div v-for="result in results" :key="result.id" class="result-item">
          <p class="question-title">
            <strong class="question-num">第{{ result.index }}题：</strong>
            <span>{{ result.title }}</span>
            <span class="time-ago margin-left-10">[{{ questionType(result.type) }}]</span>
          </p>
          <el-table v-if="result.type !== 3" :data="result.options" class="result-table"
                    border stripe show-summary :summary-method="lastRow(result)">
            <el-table-column align="center" prop="title" sortable label="选项"></el-table-column>
            <el-table-column align="center" prop="count" sortable label="小计"></el-table-column>
            <el-table-column label="比例">
              <template slot-scope="scope">
                <el-progress
                  :stroke-width="12"
                  :percentage="Number((scope.row.count / result.reply_count * 100).toFixed(1))"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionnaireResults', // 路由指向的问卷结果页面
  data() {
    return {
      results: [], // 问卷统计结果
    };
  },
  methods: {
    // 加载结果
    loadResults() {
      this.$api.questionnaires.results({ qnId: this.$route.params.qnId })
        .then((res) => { if (res) this.results = res.items; })
        .catch(() => {});
    },
    // 题目类型
    questionType(typeNum) {
      if (typeNum === 1) return '单选题';
      else if (typeNum === 2) return '多选题';
      return '问答题';
    },
    // 最后一行
    lastRow(result) { return () => (['本题有效填写人数', result.reply_count]); },
  },
  created() {
    this.loadResults();
  },
};
</script>

<style lang="scss">
#questionnaire-results {
  .results-container { padding-left: 40px; padding-right: 40px; }
  .result-item {
    padding: 19px 0 24px;
    border-bottom: 1px dashed #e6e6e6;
    .question-title {
      font-size: 15px;
    }
    .question-num {
      font-size: 16px;
    }
    .el-progress__text { font-size: 14px !important; }
  }
  .result-table.el-table th { background-color: #F5F7FA; }
}
</style>
